<template>
  <view>
    <view class="recommend">
      <p class="sch-num">477</p><font>所</font>
      <p>可填报的学校</p>
      <navigator class="bt-1" url="../../subpkg/schools_list/schools_list" @click="clkfill">
         <image :src="btFill.image_src" class="bt-fill"></image>
      </navigator>
    </view>
    <!-- 分类导航区域 -->
    <view class="nav-list">
      <view class="nav-item" v-for="(item,i) in navList" :key="i" @click="navClickHandler(item)">
        <image :src="item.image_src" class="nav-img"></image>
        <p>{{item.name}}</p>
      </view>
    </view>

  </view>
</template>

<script>
  export default {
    data() {
      return {
        //智能填报按钮
        btFill:{
          "name":"智能填报",
          "image_src": "../../static/home-icons/新按钮3.png"
        },
        //分类导航的数据列表
        navList: [{
          "name": "院校库",
          "image_src": "../../static/home-icons/学校.png",
        }, {
          "name": "分数线",
          "image_src": "../../static/home-icons/电脑.png",
        }, {
          "name": "查专业",
          "image_src": "../../static/home-icons/书.png",
        }]
      };
    },
    //onLoad() {
    //调用方法，获取分类导航的数据
    //this.getNavList()
    //},
    methods: {
    //async getNavList(){
    //const {data: res} = await uni.$http.get('/api/public/v1/home/catitems')
    //if(res.meta.status !== 200) return uni.$showMsg()
    //this.navList = res.message
    //}
    //用户点击了智能填报
    clkfill(){

    },
    
    navClickHandler(item){
      if(item.name === '院校库'){
        uni.navigateTo({
          url:'../../subpkg/schools_list/schools_list'
        })
      }
      if(item.name === '分数线'){
        uni.navigateTo({
          url:'../../subpkg/schools_list/schools_list'
        })
      }
      if(item.name === '查专业'){
        uni.navigateTo({
          url:'../../pages/specialty/specialty'
        })
      }
    },
    
    
    }
  }
</script>

<style lang="scss">
  .recommend{
    height: 310rpx;
    background-color: #C00000;
    text-align: center;
    color:white;
    .bt-fill{
      width: 270rpx;
      height: 100rpx;
      margin: 10px 10px;
    }
    .sch-num{
      font-size: 100rpx;
      color:white;
      display:inline;
    }
    
  }
  

  .nav-list {
    height: 190rpx;
    display: flex;
    justify-content: space-around;
    margin: 20px 10px;
    background-color: white;
    border-radius: 20rpx;

    .nav-img {
      //filter: drop-shadow(3px 3px 4px rgba(255, 73, 60, 0.5));
      width: 120rpx;
      height: 120rpx;
    }

    .nav-item {
      text-align: center;
      font-size: 30rpx;
    }
  }
</style>
